<template>
  <div class="content">
    <div class="information">
      <div class="header" v-text="'收款方式'"></div>
      <div>
      <div class="gatherings" v-for="item in lists" :key="item" v-show="item.bankcard">
          <div><img class="logo_icon" src="../../assets/images/personalCenter/banK.png" alt=""></div>
          <div>
              <p>{{item.khyh}}</p>
              <p>储蓄卡</p>
              <p>{{item.bankcard}}</p>
          </div>
      </div>
      <div class="gatherings" v-for="item in lists" :key="item" v-show="item.zfb">
          <div><img class="logo_icon" src="../../assets/images/personalCenter/zhi.png" alt=""></div>
          <div>
              <p>支付宝</p>
              <p>手机支付</p>
              <p>{{item.zfb}}</p>
          </div>
      </div>
      <div class="gatherings" v-for="item in lists" :key="item" v-show="item.wx">
          <div><img class="logo_icon" src="../../assets/images/personalCenter/weichat.png" alt=""></div>
          <div>
              <p>微信</p>
              <p>手机支付</p>
              <p>{{item.wx}}</p>
          </div>
      </div>
      <div class="addition">
          <a href="javascript:"  @click="bindHandle('tel')"><img src="../../assets/images/personalCenter/my_add.png" alt=""></a>
          <p>添加支付方式</p>
      </div>
      </div>
    </div>
    <!-- 添加支付方式 -->
    <bind-tel
      :show='dialogId=="tel"?true:false'
      @closeModal='onClose'
    >
    </bind-tel>
  </div>
</template>
<script>
import bindTel from "../../components/dialogContent/addGathering";
export default {
  components: {
    bindTel,
  },
  data() {
    return {
      activeName: 'first',
      dialogId: "",
      password: 12345678,
      lists: [],
      bindState: {
        emailstate: "0"
      },
      authLogs: null,
      loginLogs: null
    };
  },
  watch: {
  },
  mounted() {
    this.getmypaytype();
  },
  computed: {
  },
  methods: {
    onClose() {
      this.dialogId = null;
      this.getmypaytype();
    },
    bindHandle(k, index) {
      let idState = this.bindState.idcardstate;
      if (k == "bankAccount") {
        if (idState == "0") {
          this.$confirm(this.$t("label137"), this.$t("label140"), {
            confirmButtonText: this.$t("label138"),
            cancelButtonText: this.$t("label139"),
            type: "warning"
          }).then(() => {
            this.navigateTo("Identify");
          });
          return;
        } else if (idState == "1") {
          this.$alert(this.$t("label141"), this.$t("label140"), {
            confirmButtonText: this.$t("label138")
          });
          return;
          
        }
      }
      this.dialogId = k;
    },
    getmypaytype() {
      this.request(this.api.getmypaytype).then(res => {
        if (res.code == "0") {
          this.lists = res.data;
        }
      })
    },
    // telBind() {
    //   this.bindState.tel = '1';
    // },
  }
};
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 25px;
}
.mt-20 {
  margin-top: 20px;
}
.information {
  .header {
    @include textVcenter;
    padding: 0 15px;
    color: #C1C1C1;
    border-bottom: 1px solid #303030;
  }
  .gatherings {
      width: 320px;
      height: 80px;
      margin: 20px 15px;
      padding: 25px 20px;
      // display: inline-block;
      float: left;
      background-color: #313131;
      >div:nth-child(1) {
          width: 22%;
          display: inline-block;
          float: left;
          .logo_icon {
              width: 50px;
              height: 50px;
              border-radius: 50%;
          }
      }
      >div:nth-child(2) {
          width: 75%;
          display: inline-block;
          >p {
              display: block;
              height: 22px;
              line-height: 22px;
              color: #E4E4E4;
              font-size: 16px;
          }
          >p:nth-child(2) {
              color: #676767;
              font-size: 14px;
          }
          >p:nth-child(3) {
              margin-top: 10px;
          }
      }
  }
  .addition {
      width: 320px;
      height: 80px;
      margin: 20px 15px;
      padding: 25px 20px;
      display: inline-block;
      border:1px dashed #6D5F45;
      text-align: center;
      float: left;
      img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
      }
      p {
          color: #757575;
          margin-top: 5px;
      }
  }
}

</style>

